<template>
    <sxTable :columns="columns" :tableData="tableData" :tableLoading="tableLoading">
        <!-- 产品图片 -->
        <template v-slot:orderDetail[0].imageUrl="{row}">
            <img :src="row.orderDetail[0].imageUrl" width="100" height="30" alt="">
        </template>
        <!-- 操作按钮 -->
        <template v-slot:action="{row}">
            <el-button size="small" type="primary" :disabled="row.order_status===4">去支付</el-button>
            <el-button size="small" type="danger">删除</el-button>
        </template>
        <!-- 支付状态 -->
        <template v-slot:pay_status="{row}">
            {{row.pay_status===0 ? '未支付' : '已支付'}}
        </template>
        <!-- 订单状态 -->
        <template v-slot:order_status="{row}">
            {{orderStatus(row)}}
        </template>
    </sxTable>
</template>
<script setup>
import * as api from '@/api/pay'
import sxTable from '@/components/sxTable/index.vue'
import {ref} from 'vue'
// 定义表格的列
let columns = ref([
    {
        label:'产品图片',
        prop:'orderDetail[0].imageUrl'
    },
    {
        label:'订单编号',
        prop:'order_id'
    },
    {
        label:'产品名称',
        prop:'orderDetail[0].productName'
    },
    {
        label:'数量',
        prop:'orderDetail[0].quantity'
    },
    {
        label:'总价格',
        prop:'total_fee'
    },
    {
        label:'创建时间',
        prop:'create_time'
    },
    {
        label:'支付状态',
        prop:'pay_status'
    },
    {
        label:'订单状态',
        prop:'order_status'
    },
    {
        label:'操作',
        prop:'action'
    },
])

// 表格数据
let tableData = ref([])

// 请求数据

// 声明loading加载动画
let tableLoading = ref(false)

let getList = async () => {
    tableLoading.value = true
    try {
        let res = await api.getOrderApi()
        console.log(res)
        tableData.value = res.data.data
        tableLoading.value = false
    } catch(e) {
        console.log(e)
        tableLoading.value = false
    }
}

getList()

// 订单状态
// 订单状态：0未提交 1提交成功 2已经取消 3无效订单 4交易关闭 5 退货

let orderStatus = (row) => {
    switch (row.order_status){
        case 0:
            return '未提交'
        case 1:
            return '提交成功'
        case 2:
            return '已经取消'
        case 3:
            return '无效订单'
        case 4:
            return '交易关闭'
        case 5:
            return '退货'
    }
}

</script>
<script>
    export default {
        meta:{
            title: 'order',
            name: '订单管理',
            routeName:'order',
            icon:'icon-dd'
        }
    }
</script>